Less 安装与简介

Less与sass、stylus的区别之处在于支持浏览器支持,Less官方为此推出了专门的less.js,用于处理.less语法,并将此转换为浏览器可认知的语法格式。而Sass、stylus之类的只能通过使用node.js来进行预处理,或者你可以通过使用相关语法转换为.css,这都是以上语言所支持的。

Less与Sass、Stylus等CSS扩展语言一样,都支持变量、函数以及Mixin等特征,使得CSS更加容易维护可扩展,而Less虽然语法上没有Sass、Stylus等具有特征,但支持浏览器支持是他的特点之一

npm

通常安装 less 的方法可以通过使用脚手架进行安装,即npm install -g less来进行全局安装,通过 less 可将 .less转换为.css文件:

1
less styles.less styles.css

通过 lessc 来进行转换为 css

.less转换为.css,则需要使用lessc style.less style.css来进行转换,转换后的信息如下:

1
2
3
4
5
6
7
8
9
10
[root@kunlun less]# lessc style.less style.css
[root@kunlun less]# more style.css
p {
color: red;
}
[root@kunlun less]# more style.less
@red: red;
p {
color: @red;
}

lessc 不存在

如果lessc不存在的话可通过在 node_modules即Node模块中下载是否存在,可使用sudo find / -name lessc来搜索less文件是否存在。如果存在则可通过下方命令进行建立:

1
ln -s {user}node_modules/less/bin/lessc /usr/local/bin/lessc

{user}替换为你的node_modules之前的目录即可,之后通过使用lessc来检测是否关联成功。

浏览器支持

下载

Lass的浏览器支持需要引入官方的lass.js文件来进行渲染,lass与其他css扩展的区别就是可以在非node.js环境中运行(主要是因为node.js支持欲渲染功能)。

通过“ https://codeload.github.com/less/less.js/zip/master ” 来进行下载,解压缩后将dist/less.js文件引入到项目文件中即可。

使用

效果
本文通过使用 Laravel 框架进行运行(也可支持将扩展名改为.html),并通过引入less.js来进行支持.less渲染:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello</title>
<link rel="stylesheet" type="text/less" href="less/style.less">
<script src="js/less.js"></script>
</head>
<body>
<p>Hello</p>
</body>
</html>
1
2
3
4
5
@red: red;

p {
color: @red;
}

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布